import {fittingString} from '@/modules/topology/utils';

/* 注册自定义节点 */
const baseConfig = {
  nodePaddingLeft:  10,
  nodePaddingRight: 10,
};
export default G6 => {
  // 中心节点，带动画
  G6.registerNode('center-node', {
    draw: (cfg, group) => {
      const { id, label, size, icon, graphType, facilityType} = cfg;
      const r = size / 2;
      const x = size;
      const color = cfg.showAlarm ? "#d02341" : cfg.color;
      const back1 = group.addShape('circle', {
        zIndex: -3,
        attrs: {
          x,
          y: 0,
          r,
          fill: color,
          opacity: 0.6,
        },
        name: 'back1-shape',
      });
      const back2 = group.addShape('circle', {
        zIndex: -2,
        attrs: {
          x,
          y: 0,
          r,
          fill: color,
          opacity: 0.6,
        },
        name: 'back2-shape',
      });
      const back3 = group.addShape('circle', {
        zIndex: -1,
        attrs: {
          x,
          y: 0,
          r,
          fill: color,
          opacity: 0.6,
        },
        name: 'back3-shape',
      });
      group.addShape('text', {
          zIndex: 0,
          attrs: {
              x,
              y: 0,
              fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
              textAlign: 'center',
              textBaseline: 'middle',
              text: icon,
              fontSize: 15,
              fill: '#fff',
              cursor: 'pointer',
          },
          // must be assigned in G6 3.3 and later versions. it can be any value you want
          name: 'text-shape',
      });
      group.sort(); // Sort according to the zIndex
      back1.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: Math.random() * 100,
          repeat: true, // repeat
        },
      ); // no delay
      back2.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: 1000,
          repeat: true, // repeat
        },
      ); // 1s delay
      back3.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: 2000,
          repeat: true, // repeat
        },
      ); // 3s delay
      // 节点名称/类型
      group.addShape('text', {
        attrs: {
          text: fittingString(graphType == "phy_server" ? facilityType : label, 145),
          x,
          y: size/2 + 20,
          textAlign: 'center',
          textBaseline: 'middle',
          fontSize: 14,
          fill: '#333',
          cursor: 'pointer',
        },
        cursor: 'pointer',
        name: 'name-text-shape',
      });
      // 节点名称
      if(graphType == "phy_server") {
        group.addShape('text', {
          attrs: {
            text: fittingString(label, 145),
            x,
            y: size/2 + 40,
            textAlign: 'center',
            textBaseline: 'middle',
            fill: "#333",
            fontSize: 14,
            cursor: 'pointer',
          },
          name: 'root-text-shape',
        });
      }
      
      return back1;
    },
    update: undefined,
  },
  'circle',
  );
};
